<template>
  <div>
    <el-table
      v-loading="loading"
      border
      :data="permissionList"
      :expand-row-keys="expandKeys"
      row-key="id"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="跳转权限值" prop="toCode"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addOrUpdatePermission(row, 'update')"
          ></el-button>
          <el-button
            type="primary"
            :disabled="row.level === 1"
            icon="el-icon-edit"
            size="mini"
            @click="addOrUpdatePermission(row, 'edit')"
          ></el-button>
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @onConfirm="removePermission(row)"
          >
            <el-button
              style="margin-left: 10px"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              slot="reference"
              :disabled="row.level === 1"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加修改菜单 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      @close="dialogClosed"
      width="50%"
    >
      <span slot="footer" class="dialog-footer">
        <el-form :model="permission" :rules="rule" ref="permissionRef">
          <el-form-item
            v-if="title !== '添加一级菜单'"
            label="父级名称"
            label-width="120px"
          >
            <el-input :value="permission.pname" disabled></el-input>
          </el-form-item>
          <el-form-item label-width="120px" prop="name" label="名称">
            <el-input v-model="permission.name"></el-input>
          </el-form-item>
          <el-form-item label-width="120px" prop="code" label="功能权限值">
            <el-input v-model="permission.code"></el-input>
          </el-form-item>
          <el-form-item
            v-if="title !== '添加一级菜单'"
            label-width="120px"
            label="跳转功能权限值"
          >
            <el-input v-model="permission.toCode"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePermission">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      permissionList: [],
      expandKeys: [], // 需要自动展开的项
      dialogVisible: false,
      title: "",
      rule: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入功能权限值", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15个字符",
            trigger: "blur",
          },
        ],
      },
      // 添加菜单的收集
      permission: {
        level: 0,
        name: "",
        code: "",
        toCode: "",
      },
      loading: false,
    };
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    async getPermissionList() {
      this.loading = true;
      const res = await this.$Api.permission.getPermissionList();
      if (res.code == 20000) {
        this.loading = false;
        this.permissionList = res.data.children;
        this.expandKeys = [this.permissionList[0].id];
      }
    },
    // 添加或者修改
    addOrUpdatePermission(row, index) {
      this.permission.pid = row.id;
      if (index == "edit") {
        // 使用浅拷贝不然数据会受v-model影响
        this.permission = { ...row };
      } else {
        this.permission.level = row.level + 1;
      }
      this.dialogVisible = true;
      if (row.level == 1) {
        this.title = "添加一级菜单";
      } else {
        this.title = "添加功能";
        this.permission.pname = row.name;
      }
    },

    /* 
    添加或更新功能权限
    */
    savePermission() {
      this.$refs.permissionRef.validate(async (valid) => {
        if (valid) {
          const { pname, ...perm } = this.permission; // pname不需要携带
          const result = await this.$Api.permission[
            perm.id ? "updatePermission" : "addPermission"
          ](perm);
          this.$message.success(
            result.message || `${perm.id ? "修改" : "添加"}成功!`
          );
          this.getPermissionList();
          this.dialogVisible = false;
        }
      });
    },
    async removePermission(row) {
      const res = await this.$Api.permission.removePermission(row.id);
      if (res.code == 20000) {
        this.$message.success("删除成功");
        this.getPermissionList();
      }
    },
    // 监听弹出层关闭
    dialogClosed() {
      this.$nextTick(() => {
        this.permission = {};
        this.$refs.permissionRef.clearValidate();
      });
    },
  },
};
</script>

<style>
.el-dialog__body {
  padding: 10px 0;
}
</style>
